<style>


    /**** 搜索 *****/
    .filter-section {
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

    .filter-section:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    }

    .filter-section .filter-btn {
        transition: all 0.2s ease;
    }

    .filter-section .filter-btn.active {
        background-color: #0d6efd;
        color: white;
    }

    .filter-section .save-btn.active {
        color: #2563eb;
    }

    .filter-section .search-box {
        position: relative;
    }

    .filter-section .search-box input {
        padding-left: 2.5rem;
    }

    .filter-section .search-box i {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6c757d;
    }

    .filter-section .filter-toggle {
        cursor: pointer;
        display: none;
    }

    /**** 列表 *****/
    .tag-card {
        transition: all 0.3s ease;
    }

    .tag-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .tag-card .tag-stats {
        font-size: 0.85rem;
    }

    .tag-card .tag-stat-item {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .tag-card .tag-author {
        font-size: 0.85rem;
    }

    .tag-card .image-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .tag-card .tag-image {
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 4px;
    }


    .tag-card .like-btn, .save-btn {
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .tag-card .like-btn:hover, .save-btn:hover {
        transform: scale(1.1);
    }

    .tag-card .like-btn.active {
        color: #dc2626;
    }


    @media (max-width: 768px) {


        /*** 筛选器遮罩层（移动端）  ***/
        .filter-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1040;
            display: none;
        }

        .filter-overlay.active {
            display: block;
        }

        /*** 筛选  ***/
        .filter-section.filter-sidebar {
            position: fixed;
            top: 0;
            left: -100%;
            height: 100vh;
            width: 80%;
            max-width: 300px;
            z-index: 1050;
            transition: left 0.3s ease;
            overflow-y: auto;
        }

        .filter-section.filter-sidebar.active {
            left: 0;
        }

        .filter-section .filter-toggle {
            display: block;
        }
    }
</style>


<div class="container py-5">
    <h2 class="mb-2 text-center">标签探索</h2>
    <p class="text-center text-muted mb-6">发现感兴趣的话题标签，连接志同道合的朋友</p>

    <!-- 移动端筛选器切换按钮 -->
    <div class="d-flex justify-content-between align-items-center mb-4 filter-toggle">
        <button class="btn btn-outline-primary" id="openFilter">
            <i class="fas fa-filter me-1"></i> 筛选
        </button>
        <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" class="form-control" placeholder="搜索标签...">
        </div>
    </div>

    <div class="row">
        <!-- 筛选侧边栏 -->
        <div class="col-lg-3 filter-sidebar filter-section p-4">
            <div class="d-flex justify-content-between align-items-center mb-4 d-lg-none">
                <h5 class="mb-0">筛选条件</h5>
                <button class="btn-close" id="closeFilter"></button>
            </div>

            <!-- 搜索框 -->
            <div class="mb-5 d-none d-lg-block">
                <h5 class="mb-3">搜索标签</h5>
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" class="form-control" placeholder="输入标签名称...">
                </div>
            </div>

            <!-- 分类筛选 -->
            <div class="mb-5">
                <h5 class="mb-3">内容分类</h5>
                <div class="d-flex flex-wrap gap-2">
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">全部</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">生活方式</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">美食</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">旅行</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">摄影</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">健身</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">读书</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">科技</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">艺术</button>
                </div>
            </div>

            <!-- 热门程度筛选 -->
            <div class="mb-5">
                <h5 class="mb-3">热门程度</h5>
                <div class="d-flex flex-wrap gap-2">
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">全部</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">热门</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">趋势</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">新标签</button>
                </div>
            </div>

            <!-- 时间筛选 -->
            <div class="mb-5">
                <h5 class="mb-3">创建时间</h5>
                <div class="d-flex flex-wrap gap-2">
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">全部时间</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">今天</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">本周</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">本月</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">今年</button>
                </div>
            </div>

            <!-- 活跃度筛选 -->
            <div class="mb-5">
                <h5 class="mb-3">活跃度</h5>
                <div class="d-flex flex-wrap gap-2">
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">全部</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">高活跃</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">中活跃</button>
                    <button class="filter-btn btn btn-outline-primary rounded-pill px-3 py-1">低活跃</button>
                </div>
            </div>

            <!-- 标签大小筛选 -->
            <div class="mb-5">
                <h5 class="mb-3">标签规模</h5>
                <div class="d-flex align-items-center gap-2">
                    <input type="range" class="form-range" min="0" max="100" value="50" id="tagSizeRange">
                    <span id="tagSizeValue" class="text-sm">50%</span>
                </div>
                <div class="d-flex justify-content-between text-xs text-muted mt-1">
                    <span>小众</span>
                    <span>大众</span>
                </div>
            </div>

            <!-- 应用筛选按钮 -->
            <div class="d-grid gap-2">
                <button class="btn btn-primary">应用筛选</button>
                <button class="btn btn-outline-secondary">重置筛选</button>
            </div>
        </div>

        <!-- 标签列表区域 -->
        <div class="col-lg-9">

            <!-- 标签列表 -->
            <div class="row">
                <!-- 标签1 -->
                <div class="col-md-6 col-lg-6">
                    <div class="tag-card bg-white rounded-xl shadow-sm p-4 h-100">
                        <div class="d-flex justify-content-between items-start mb-3">
                            <h5 class="fw-bold text-lg mb-0">摄影技巧</h5>
                            <span class="badge bg-primary bg-opacity-10 text-primary">热门</span>
                        </div>

                        <div class="image-grid mb-3">
                            <img src="https://picsum.photos/id/1039/200/200" alt="摄影作品示例" class="tag-image">
                            <img src="https://picsum.photos/id/1043/200/200" alt="摄影作品示例" class="tag-image">
                            <img src="https://picsum.photos/id/1050/200/200" alt="摄影作品示例" class="tag-image">
                            <img src="https://picsum.photos/id/1059/200/200" alt="摄影作品示例" class="tag-image">
                        </div>

                        <p class="text-muted text-sm mb-3 line-clamp-2">
                            分享各类摄影技巧、构图方法、后期处理教程，适合摄影爱好者交流学习。</p>

                        <div class="tag-author text-muted mb-3">
                            <img src="https://picsum.photos/id/1012/32/32" alt="摄影师小明的头像"
                                 class="rounded-circle me-2"
                                 width="24" height="24">
                            摄影师小明
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <div class="tag-stats d-flex gap-3 text-muted">
                                <div class="tag-stat-item">
                                    <i class="far fa-eye me-1"></i>
                                    <span>24.5k</span>
                                </div>
                                <div class="tag-stat-item">
                                    <i class="far fa-comment me-1"></i>
                                    <span>1.2k</span>
                                </div>
                                <div class="tag-stat-item">
                                    <i class="far fa-user me-1"></i>
                                    <span>8.7k</span>
                                </div>
                            </div>

                            <div class="d-flex gap-2">
                                <div class="like-btn">
                                    <i class="far fa-heart"></i>
                                </div>
                                <div class="save-btn">
                                    <i class="far fa-bookmark"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 标签2 -->
                <div class="col-md-6 col-lg-6">
                    <div class="tag-card bg-white rounded-xl shadow-sm p-4 h-100">
                        <div class="d-flex justify-content-between items-start mb-3">
                            <h5 class="fw-bold text-lg mb-0">美食探店</h5>
                            <span class="badge bg-success bg-opacity-10 text-success">新话题</span>
                        </div>

                        <div class="image-grid mb-3">
                            <img src="https://picsum.photos/id/1080/200/200" alt="美食示例" class="tag-image">
                            <img src="https://picsum.photos/id/1084/200/200" alt="美食示例" class="tag-image">
                            <img src="https://picsum.photos/id/1082/200/200" alt="美食示例" class="tag-image">
                            <img src="https://picsum.photos/id/1079/200/200" alt="美食示例" class="tag-image">
                        </div>

                        <p class="text-muted text-sm mb-3 line-clamp-2">
                            发现城市里的隐藏美食，分享探店体验和美食攻略，寻找志同道合的吃货朋友。</p>

                        <div class="tag-author text-muted mb-3">
                            <img src="https://picsum.photos/id/1027/32/32" alt="美食家小丽的头像"
                                 class="rounded-circle me-2"
                                 width="24" height="24">
                            美食家小丽
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <div class="tag-stats d-flex gap-3 text-muted">
                                <div class="tag-stat-item">
                                    <i class="far fa-eye me-1"></i>
                                    <span>18.3k</span>
                                </div>
                                <div class="tag-stat-item">
                                    <i class="far fa-comment me-1"></i>
                                    <span>896</span>
                                </div>
                                <div class="tag-stat-item">
                                    <i class="far fa-user me-1"></i>
                                    <span>5.2k</span>
                                </div>
                            </div>

                            <div class="d-flex gap-2">
                                <div class="like-btn">
                                    <i class="far fa-heart"></i>
                                </div>
                                <div class="save-btn">
                                    <i class="far fa-bookmark"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 标签3 -->
                <div class="col-md-6 col-lg-6">
                    <div class="tag-card bg-white rounded-xl shadow-sm p-4 h-100">
                        <div class="d-flex justify-content-between items-start mb-3">
                            <h5 class="fw-bold text-lg mb-0">健身打卡</h5>
                            <span class="badge bg-warning bg-opacity-10 text-warning">趋势</span>
                        </div>

                        <div class="image-grid mb-3">
                            <img src="https://picsum.photos/id/1058/200/200" alt="健身示例" class="tag-image">
                            <img src="https://picsum.photos/id/1060/200/200" alt="健身示例" class="tag-image">
                            <img src="https://picsum.photos/id/1062/200/200" alt="健身示例" class="tag-image">
                            <img src="https://picsum.photos/id/1066/200/200" alt="健身示例" class="tag-image">
                        </div>

                        <p class="text-muted text-sm mb-3 line-clamp-2">
                            记录健身日常，分享训练计划和饮食搭配，互相鼓励，共同进步。</p>

                        <div class="tag-author text-muted mb-3">
                            <img src="https://picsum.photos/id/1074/32/32" alt="健身教练大强的头像"
                                 class="rounded-circle me-2"
                                 width="24" height="24">
                            健身教练大强
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <div class="tag-stats d-flex gap-3 text-muted">
                                <div class="tag-stat-item">
                                    <i class="far fa-eye me-1"></i>
                                    <span>31.2k</span>
                                </div>
                                <div class="tag-stat-item">
                                    <i class="far fa-comment me-1"></i>
                                    <span>2.5k</span>
                                </div>
                                <div class="tag-stat-item">
                                    <i class="far fa-user me-1"></i>
                                    <span>12.8k</span>
                                </div>
                            </div>

                            <div class="d-flex gap-2">
                                <div class="like-btn">
                                    <i class="far fa-heart"></i>
                                </div>
                                <div class="save-btn">
                                    <i class="far fa-bookmark"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 标签4 -->
                <div class="col-md-6 col-lg-6">
                    <div class="tag-card bg-white rounded-xl shadow-sm p-4 h-100">
                        <div class="d-flex justify-content-between items-start mb-3">
                            <h5 class="fw-bold text-lg mb-0">旅行日记</h5>
                            <span class="badge bg-primary bg-opacity-10 text-primary">热门</span>
                        </div>

                        <div class="image-grid mb-3">
                            <img src="https://picsum.photos/id/1036/200/200" alt="旅行照片示例" class="tag-image">
                            <img src="https://picsum.photos/id/1039/200/200" alt="旅行照片示例" class="tag-image">
                            <img src="https://picsum.photos/id/1043/200/200" alt="旅行照片示例" class="tag-image">
                            <img src="https://picsum.photos/id/1047/200/200" alt="旅行照片示例" class="tag-image">
                        </div>

                        <p class="text-muted text-sm mb-3 line-clamp-2">
                            记录旅途中的美好瞬间和独特体验，分享旅行攻略和小众目的地。</p>

                        <div class="tag-author text-muted mb-3">
                            <img src="https://picsum.photos/id/1066/32/32" alt="背包客阿杰的头像"
                                 class="rounded-circle me-2"
                                 width="24" height="24">
                            背包客阿杰
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <div class="tag-stats d-flex gap-3 text-muted">
                                <div class="tag-stat-item">
                                    <i class="far fa-eye me-1"></i>
                                    <span>42.8k</span>
                                </div>
                                <div class="tag-stat-item">
                                    <i class="far fa-comment me-1"></i>
                                    <span>3.7k</span>
                                </div>
                                <div class="tag-stat-item">
                                    <i class="far fa-user me-1"></i>
                                    <span>15.3k</span>
                                </div>
                            </div>

                            <div class="d-flex gap-2">
                                <div class="like-btn">
                                    <i class="far fa-heart"></i>
                                </div>
                                <div class="save-btn">
                                    <i class="far fa-bookmark"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 标签5 -->
                <div class="col-md-6 col-lg-6">
                    <div class="tag-card bg-white rounded-xl shadow-sm p-4 h-100">
                        <div class="d-flex justify-content-between items-start mb-3">
                            <h5 class="fw-bold text-lg mb-0">读书分享</h5>
                            <span class="badge bg-info bg-opacity-10 text-info">精选</span>
                        </div>

                        <div class="image-grid mb-3">
                            <img src="https://picsum.photos/id/1070/200/200" alt="书籍示例" class="tag-image">
                            <img src="https://picsum.photos/id/1074/200/200" alt="书籍示例" class="tag-image">
                            <img src="https://picsum.photos/id/1076/200/200" alt="书籍示例" class="tag-image">
                            <img src="https://picsum.photos/id/1077/200/200" alt="书籍示例" class="tag-image">
                        </div>

                        <p class="text-muted text-sm mb-3 line-clamp-2">
                            推荐好书，分享阅读心得和读书笔记，一起在文字中探索世界。</p>

                        <div class="tag-author text-muted mb-3">
                            <img src="https://picsum.photos/id/1025/32/32" alt="书虫小雅的头像"
                                 class="rounded-circle me-2"
                                 width="24" height="24">
                            书虫小雅
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <div class="tag-stats d-flex gap-3 text-muted">
                                <div class="tag-stat-item">
                                    <i class="far fa-eye me-1"></i>
                                    <span>19.5k</span>
                                </div>
                                <div class="tag-stat-item">
                                    <i class="far fa-comment me-1"></i>
                                    <span>1.8k</span>
                                </div>
                                <div class="tag-stat-item">
                                    <i class="far fa-user me-1"></i>
                                    <span>7.2k</span>
                                </div>
                            </div>

                            <div class="d-flex gap-2">
                                <div class="like-btn">
                                    <i class="far fa-heart"></i>
                                </div>
                                <div class="save-btn">
                                    <i class="far fa-bookmark"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 标签6 -->
                <div class="col-md-6 col-lg-6">
                    <div class="tag-card bg-white rounded-xl shadow-sm p-4 h-100">
                        <div class="d-flex justify-content-between items-start mb-3">
                            <h5 class="fw-bold text-lg mb-0">城市风光</h5>
                            <span class="badge bg-primary bg-opacity-10 text-primary">热门</span>
                        </div>

                        <div class="image-grid mb-3">
                            <img src="https://picsum.photos/id/1031/200/200" alt="城市风光照片" class="tag-image">
                            <img src="https://picsum.photos/id/1033/200/200" alt="城市风光照片" class="tag-image">
                            <img src="https://picsum.photos/id/1036/200/200" alt="城市风光照片" class="tag-image">
                            <img src="https://picsum.photos/id/1041/200/200" alt="城市风光照片" class="tag-image">
                        </div>

                        <p class="text-muted text-sm mb-3 line-clamp-2">
                            分享世界各地的城市建筑、街景和都市生活，记录城市的独特魅力。</p>

                        <div class="tag-author text-muted mb-3">
                            <img src="https://picsum.photos/id/1077/32/32" alt="城市摄影师的头像"
                                 class="rounded-circle me-2"
                                 width="24" height="24">
                            城市摄影师
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <div class="tag-stats d-flex gap-3 text-muted">
                                <div class="tag-stat-item">
                                    <i class="far fa-eye me-1"></i>
                                    <span>56.2k</span>
                                </div>
                                <div class="tag-stat-item">
                                    <i class="far fa-comment me-1"></i>
                                    <span>4.1k</span>
                                </div>
                                <div class="tag-stat-item">
                                    <i class="far fa-user me-1"></i>
                                    <span>18.7k</span>
                                </div>
                            </div>

                            <div class="d-flex gap-2">
                                <div class="like-btn">
                                    <i class="far fa-heart"></i>
                                </div>
                                <div class="save-btn">
                                    <i class="far fa-bookmark"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- 筛选器遮罩层（移动端） -->
<div class="filter-overlay" id="filterOverlay"></div>


<script>
    // 筛选按钮交互
    document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            // 如果是同组按钮（有相同的父级btn-group），则移除其他按钮的active类
            const parentGroup = this.closest('.btn-group');
            if (parentGroup) {
                parentGroup.querySelectorAll('.filter-btn').forEach(sibling => {
                    sibling.classList.remove('active');
                });
            }
            this.classList.add('active');
        });
    });

    // 标签大小滑块
    const rangeInput = document.getElementById('tagSizeRange');
    const rangeValue = document.getElementById('tagSizeValue');

    rangeInput.addEventListener('input', function () {
        rangeValue.textContent = `${this.value}%`;
    });

    // 点赞功能
    document.querySelectorAll('.like-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const icon = this.querySelector('i');
            if (icon.classList.contains('far')) {
                icon.classList.remove('far');
                icon.classList.add('fas');
                this.classList.add('active');
            } else {
                icon.classList.remove('fas');
                icon.classList.add('far');
                this.classList.remove('active');
            }
        });
    });

    // 收藏功能
    document.querySelectorAll('.save-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const icon = this.querySelector('i');
            if (icon.classList.contains('far')) {
                icon.classList.remove('far');
                icon.classList.add('fas');
                this.classList.add('active');
            } else {
                icon.classList.remove('fas');
                icon.classList.add('far');
                this.classList.remove('active');
            }
        });
    });

    // 移动端筛选器交互
    const openFilterBtn = document.getElementById('openFilter');
    const closeFilterBtn = document.getElementById('closeFilter');
    const filterSidebar = document.querySelector('.filter-sidebar');
    const filterOverlay = document.getElementById('filterOverlay');

    openFilterBtn.addEventListener('click', function () {
        filterSidebar.classList.add('active');
        filterOverlay.classList.add('active');
        document.body.style.overflow = 'hidden'; // 防止背景滚动
    });

    function closeFilter() {
        filterSidebar.classList.remove('active');
        filterOverlay.classList.remove('active');
        document.body.style.overflow = ''; // 恢复滚动
    }

    closeFilterBtn.addEventListener('click', closeFilter);
    filterOverlay.addEventListener('click', closeFilter);
</script>

